/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import './launchmode2.css';
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import DownloadProcessBar from "@/components/DownloadProcessBar/downloadProcessBar";
import NavigateBar from "@/components/NavigateBar";

import icon_app_logo from "@/assets/icon_app_logo.png"

import icon_banner2_mode1_gha from "@/assets/icon_banner2_mode1_gha.jpg"
import icon_banner2_mode2_gha from "@/assets/icon_banner2_mode2_gha.jpg"
import icon_banner2_mode3_gha from "@/assets/icon_banner2_mode3_gha.jpg"
import icon_banner2_mode4_gha from "@/assets/icon_banner2_mode4_gha.jpg"
import icon_banner2_mode5_gha from "@/assets/icon_banner2_mode5_gha.jpg"

import icon_banner2_mode1_xaf from "@/assets/icon_banner2_mode1_xaf.jpg"
import icon_banner2_mode2_xaf from "@/assets/icon_banner2_mode2_xaf.jpg"
import icon_banner2_mode3_xaf from "@/assets/icon_banner2_mode3_xaf.jpg"
import icon_banner2_mode4_xaf from "@/assets/icon_banner2_mode4_xaf.jpg"
import icon_banner2_mode5_xaf from "@/assets/icon_banner2_mode5_xaf.jpg"

import icon_banner2_mode1_fcfa from "@/assets/icon_banner2_mode1_fcfa.jpg"
import icon_banner2_mode2_fcfa from "@/assets/icon_banner2_mode2_fcfa.jpg"
import icon_banner2_mode3_fcfa from "@/assets/icon_banner2_mode3_fcfa.jpg"
import icon_banner2_mode4_fcfa from "@/assets/icon_banner2_mode4_fcfa.jpg"
import icon_banner2_mode5_fcfa from "@/assets/icon_banner2_mode5_fcfa.jpg"

import icon_banner2_mode1_ksh from "@/assets/icon_banner2_mode1_ksh.jpg"
import icon_banner2_mode2_ksh from "@/assets/icon_banner2_mode2_ksh.jpg"
import icon_banner2_mode3_ksh from "@/assets/icon_banner2_mode3_ksh.jpg"
import icon_banner2_mode4_ksh from "@/assets/icon_banner2_mode4_ksh.jpg"
import icon_banner2_mode5_ksh from "@/assets/icon_banner2_mode5_ksh.jpg"

import icon_banner2_mode1_ugx from "@/assets/icon_banner2_mode1_ugx.jpg"
import icon_banner2_mode2_ugx from "@/assets/icon_banner2_mode2_ugx.jpg"
import icon_banner2_mode3_ugx from "@/assets/icon_banner2_mode3_ugx.jpg"
import icon_banner2_mode4_ugx from "@/assets/icon_banner2_mode4_ugx.jpg"
import icon_banner2_mode5_ugx from "@/assets/icon_banner2_mode5_ugx.jpg"

import icon_logo1 from "@/assets/icon_logo1@2x.png"
import icon_about_arrow from '@/assets/icon_about_arrow@2x.png'

import { saveEvent } from "@/store/actions/saveEvent";
import { LangStore } from "@/utils/langStore";

import { LangEnGhs } from "@/utils/langEnGhs";
import { LangEnKes } from "@/utils/langEnKes";
import { LangEnUgx } from "@/utils/langEnUgx";
import { LangFrFcfa } from "@/utils/langFrFcfa";
import { LangFrXaf } from "@/utils/langFrXaf";
import { getZone } from "@/store/actions/zone";
import { getAreaInfo, setAreaInfo } from "@/utils/storage";
// import { el, tr } from "date-fns/locale";

/**
 * 落地页-1
 */
export default function LaunchMode2() {

    // 获取路由历史 history 对象
    const history = useHistory()

    // 文案翻译
    const [curLang, setCurLang] = useState(null);

    // 接口转发
    const [curPath, setCurPath] = useState(null);

    // 商店截图
    const [curPlayIcons, setCurPlayIcons] = useState([]);

    // 文案翻译
    const [curAppStore, setCurAppStore] = useState(LangStore);

    // 是否在下载
    const [isDownloading, setIsDownloading] = useState(false);

    //获取 Redux 分发器
    const dispatch = useDispatch()

    const items = curPlayIcons.map((banner, index) => (
        <img className="launchmode2SwiperItemImageSelf" src={banner} alt="" key={index} />
    ));

    //启动时请求用户状态
    useEffect(() => {
        //添加 fb 像素
        // eslint-disable-next-line no-undef
        fbq('track', 'Page_LAUNCH');
        // eslint-disable-next-line no-undef
        gtag('track', 'Page_LAUNCH');

        // 查询缓存是否存在
        let areaInfo = getAreaInfo();
        if (areaInfo.length > 0) {
            // 直接返回
            onDoGetZoneCallback(true, areaInfo);
        } else {
            // 请求时区转发
            doGetZone();
        }

        return () => {
            if (curPath && curPath.length > 0) {
                //打点
                doHitEvent(curPath, "launchmode2_END");
            } else {
                // 查询缓存是否存在
                let areaInfo = getAreaInfo();
                if (areaInfo.length > 0) {
                    //打点
                    doHitEvent(areaInfo, "launchmode2_END");
                }
            }
        }
    }, [])



    //请求转发接口
    const doGetZone = async () => {
        console.log("doGetZone: ");

        try {
            //显示loading
            // setMaskVisible(true)

            //获取Action
            const action = getZone(onDoGetZoneCallback)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }


    // 请求转发接口 返回
    const onDoGetZoneCallback = (success, data) => {
        //关闭loading
        // setMaskVisible(false)
        console.log('请求转发接口 返回: ' + success);

        if (success && data) {
            setCurPath(data);
            setAreaInfo(data);

            // 判断是否个国家
            if (data.endsWith('gha')) {
                // 加纳
                setCurLang(LangEnGhs);
                setCurPlayIcons([icon_banner2_mode2_gha, icon_banner2_mode3_gha, icon_banner2_mode4_gha, icon_banner2_mode5_gha, icon_banner2_mode1_gha])

            } else if (data.endsWith('ksh')) {
                // 肯尼亚
                setCurLang(LangEnKes);
                setCurPlayIcons([icon_banner2_mode2_ksh, icon_banner2_mode3_ksh, icon_banner2_mode4_ksh, icon_banner2_mode5_ksh, icon_banner2_mode1_ksh])

            } else if (data.endsWith('ugx')) {
                // 乌干达
                setCurLang(LangEnUgx);
                setCurPlayIcons([icon_banner2_mode2_ugx, icon_banner2_mode3_ugx, icon_banner2_mode4_ugx, icon_banner2_mode5_ugx, icon_banner2_mode1_ugx])

            } else if (data.endsWith('xaf')) {
                // 喀唛隆
                setCurLang(LangFrXaf);
                setCurPlayIcons([icon_banner2_mode2_xaf, icon_banner2_mode3_xaf, icon_banner2_mode4_xaf, icon_banner2_mode5_xaf, icon_banner2_mode1_xaf])

            } else {
                // 科特
                setCurLang(LangFrFcfa);
                setCurPlayIcons([icon_banner2_mode2_fcfa, icon_banner2_mode3_fcfa, icon_banner2_mode4_fcfa, icon_banner2_mode5_fcfa, icon_banner2_mode1_fcfa])
            }

            //打点
            doHitEvent(data, "launchmode2_START")
        }
    };

    //点击下载
    const onHandleDownloadClick = () => {
        //打点
        doHitEvent(curPath, "INSTALL_CLICK");

        //跳转审核中页
        history.replace("/download");
    }

    //点击下载
    const onHandleInstallClick = () => {

        //打点
        doHitEvent(curPath, "INSTALL_CLICK")

        // 设置下载中
        setIsDownloading(true);

        const apkUrl = process.env.REACT_APP_PATH_APK + "";
        window.location.href = apkUrl;

    }

    // 下载动画完成
    const onHandleDownloadProcessFinish = () => {
        setIsDownloading(false);
    }

    //打点接口
    const doHitEvent = async (path, type, remark = "") => {
        console.log("doHitEvent: " + path + " , " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(path, type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    return (
        <div className="launchmode2Root">
            <NavigateBar theme="transparent" onAddFavorite={() => { }} onAddHome={() => { }}></NavigateBar>

            {/* 拿到地区数据时才刷新 */}
            {curLang && <div className="launchmode2Root">

                {/* app 图标 */}
                <div className="launchmode2RowGlobalPadding">
                    <img className="launchmode2AppLogo" src={icon_logo1} alt="" />

                    <div className="launchmode2ColumnFullRight launchmode2PaddingLeft16Px">
                        <span className="launchmode2AppName">{curLang.appName}</span>
                        <span className="launchmode2AppOwner launchmode2MarginTop5Px">{curLang.appDev}</span>
                    </div>
                </div>

                {/* 评价、下载量 */}
                <div className="launchmode2RowGlobalPadding launchmode2MarginTop32Px launchmode2FlexCenter">
                    <div className="launchmode2ColumnStoreItem">
                        <div className="launchmode2StoreText">{curAppStore.appReviewStar}</div>
                        <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curAppStore.appReviewCount} {curLang.reviews}</div>
                    </div>

                    {/* <div className="launchmode2Space22Px"></div> */}

                    <div className="launchmode2ColumnStoreItem">
                        <div className="launchmode2StoreText">{curAppStore.appDownloadCount}</div>
                        <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curLang.downloads}</div>
                    </div>

                    {/* <div className="launchmode2Space22Px"></div> */}

                    <div className="launchmode2ColumnStoreItem">
                        <div className="launchmode2StoreTextAgeLimit">{curAppStore.appAgeLimit}</div>
                        <div className="launchmode2StoreTips launchmode2MarginTop5Px">{curLang.ratedFor3Plus}</div>
                    </div>
                </div>

                {/* 跳转应用市场 */}
                {!isDownloading && <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop42Px launchmode2Padding26Px">
                    <div className="launchmode2BtnInstall" onClick={onHandleDownloadClick}>
                        <div className="launchmode2InstallText">{curLang.toInstall}</div>
                    </div>
                </div>}

                {isDownloading && <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop42Px launchmode2Padding26Px">
                    <DownloadProcessBar onAnimationFinish={() => { onHandleDownloadProcessFinish() }} />
                </div>}

                {/* banner */}
                <div className="launchmode2RowGlobalPadding launchmode2MarginTop60Px">
                    <div className="launchmode2SwiperContent">
                        {/* <Swiper
                        indicator={() => null}
                        defaultIndex={0}>
                        {items}
                    </Swiper> */}
                        {items}
                    </div>
                </div>

                {/* 申请步骤 */}
                <div className="launchmode2RowGlobalPadding launchmode2MarginTop17Px">
                    <div className="launchmode2StepTitle">{curLang.aboutThisApp}</div>
                    <img className="launchmode2StepIcon" src={icon_about_arrow} alt="" onClick={onHandleDownloadClick} />
                </div>

                {/* 申请步骤 */}
                <div className="launchmode2RowGlobalPadding launchmode2FlexCenter launchmode2MarginTop10Px">
                    <div className="launchmode2StepText">
                        {curLang.appStoreListingRow1}<br></br>
                        {curLang.appStoreListingRow2}<br></br>
                        {curLang.appStoreListingRow3}<br></br>
                        {curLang.appStoreListingRow4}<br></br>
                        {curLang.appStoreListingRow5}<br></br>
                        {curLang.appStoreListingRow6}<br></br>
                    </div>
                </div>

                {/* 申请步骤 */}
                <div className="launchmode2ColumnGlobalPadding launchmode2MarginTop14Px">
                    <div className="launchmode2StepTitle launchmode2FontSize14px">{curLang.updatedOn}</div>
                    <div className="launchmode2StepText launchmode2FontColorUpdate launchmode2MarginTop5Px">{curLang.updatedDate}</div>
                </div>

                {/* 标签 */}
                <div className="launchmode2RowGlobalPadding launchmode2MarginTop28Px">
                    <div className="launchmode2CateTag">{curLang.topFreeFinance}</div>
                    <div className="launchmode2Space11Px"></div>
                    <div className="launchmode2CateTag">{curLang.finance}</div>
                </div>

                {/* 底部标签 */}
                <div className="launchmode2Space11Px launchmode2MarginTop42Px"></div>

            </div>}

            {!curLang && <div className="launchmode2LogoBg">
                <img className="launchmode2Logo" alt="" src={icon_app_logo} />
            </div>}
        </div>
    )
}